<template>
	<view class="content">
		<text class="commonColor">组件测试1</text>  
		<!-- 使用竖向滚动时，需要给 <scroll-view> 一个固定高度，通过 css 设置 height； -->
		 <scroll-view 
			class="scrollBox" 
			scroll-y="true" 
			:scroll-into-view="data.scrollIntoView"
			:upper-threshold="50" 
			@scrolltoupper="scrolltoupper"
			@scrolltolower="scrolltolower"
			@scroll="scroll"
			:scroll-top="data.scrollTop">
		 	<view class="scollitem" 
				v-for="item in 10" 
				:key="item" 
				:id="`scrollItem${item}`">
				{{`scrollItem${item}`}}
			</view>
		 </scroll-view> 
		 <button size="mini" type="default" @click="scrollIntoView">scroll-into-view</button>
		 <button size="mini" type="default" @click="scrollTop">scroll-top</button>
		 <scroll-view class="horizontalBox" scroll-x="true" :upper-threshold="50" :scroll-left="160">
		 	<view class="scollitem" v-for="item in 10" :key="item">{{`scrollItem${item}`}}</view>
		 </scroll-view> 
		 
		<navigator url="/pages/index/index" open-type="navigateBack">
			<button size="mini" type="default">返回首页</button>
		</navigator>
	</view>
</template>

<script setup>
	import {
		onBeforeMount,
		onMounted,
		onBeforeUpdate,
		onUpdated,
		onBeforeUnmount,
		onUnmounted,
		onActivated,
		onDeactivated,
		computed,
		ref
	} from "vue"
	import {onLoad,onReady,onShow,onHide,onUnload,onPageScroll} from "@dcloudio/uni-app"
	
	const data = ref({
		scrollTop:0,
		scrollLeft:100,
		scrollIntoView: 'scrollItem4',
	})
	
	let scrollIntoView = ()=>{
		data.value.scrollIntoView = 'scrollItem' + Math.round(Math.random()*10)
	}
	let scrollTop = ()=>{
		data.value.scrollTop = Math.random()*1000;
		console.log('scrollTop...', data.value.scrollTop)
	}
	
	let scrolltoupper = (e)=>{
		console.log('scrolltoupper...', e)
	}
	let scrolltolower = (e)=>{
		console.log('scrolltolower...', e)
	}
	let scroll = (e)=>{
		console.log('scroll...', e)
	}
	 
</script>
<style lang="scss">
	.horizontalBox, .scrollBox{
		/* 谷歌内核不显示滚动条 */
		.uni-scroll-view::-webkit-scrollbar {
		    display: none;
		}
	}
	
</style>
<style lang="scss" scoped>
	.scrollBox{
		height: 200px;
		padding: 10px;
		box-sizing: border-box;
		.scollitem{
			height: 160px;
			box-sizing: border-box;
			padding: 10px;
			margin: 6px 0px;
			border-radius: 10px;
			background-color: green;
			border: 1px solid #ccc;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
		
	.horizontalBox{
		height: 200px;
		padding: 10px;
		box-sizing: border-box;
		white-space: nowrap;
		.scollitem{
			height: 160px;
			width: 140px;
			box-sizing: border-box;
			margin: 0px 6px;
			padding: 10px;
			border-radius: 10px;
			background-color: green;
			border: 1px solid #ccc;
			display: inline-flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>